<template>
  <u-popup
    :show="show"
    mode="center"
    :round="12"
    bgColor="transparent"
    @close="close">
    <view class="shareCode">
      <view class="absolute z-10 flex flex-col items-center codeContent">
        <view class="pt-6 text-[44rpx] font-medium u-primary">
          {{ title }}
        </view>
        <view class="py-5">
          <image
            v-if="ticket"
            :src="`https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=${ticket}`"
            class="block w-[360rpx] h-[360rpx]" />
          <image
            v-else
            src="https://onelive.obs.cn-south-1.myhuaweicloud.com/uniapp/static/accountQrcode.png"
            class="block w-[360rpx] h-[360rpx]" />
        </view>
        <view class="text-sm">关注公众号, 接收审核、订单等消息</view>
      </view>
      <view class="absolute z-20 flex items-center codeFooter">
        <!-- <image v-if="userInfo?.avatar" :src="userInfo.avatar" class="block w-10 h-10 ml-8 mr-3 rounded-full" />
        <image v-else src="https://onelive.obs.cn-south-1.myhuaweicloud.com/uniapp/static/defultHead.png" class="block w-10 h-10 ml-8 mr-3 rounded-full" /> -->

        <text class="pr-3 ml-8 text-base font-bold text-white">
          {{ userInfo?.nickName }}
        </text>
        <text class="pr-3 text-white">{{ userInfo?.deptName }}</text>
      </view>
    </view>

    <view class="flex justify-center pt-3" @click.stop="close">
      <i class="text-4xl text-white iconfont">&#xe725;</i>
    </view>
  </u-popup>
</template>

<script setup lang="ts">
import { useUserStore } from '@/stores/user'
import { getUserTicket } from '@/api/my'

const props = defineProps({
  // 标题
  title: {
    type: String,
    default: '长按识别，关注即绑定'
  }
})

const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)

const show = ref(false)
const ticket = ref<any>()
const open = () => {
  // 打开推广码
  getUserTicket().then((res) => {
    ticket.value = res.data.ticket
  })
  show.value = true
}
const close = () => {
  show.value = false
}

defineExpose({ open })
</script>

<style lang="scss" scoped>
.shareCode {
  width: 608rpx;
  height: 692rpx;
  position: relative;
  background: $u-primary;
  border-radius: 40rpx;
  margin-top: 120rpx;
  .codeContent {
    width: 536rpx;
    height: 756rpx;
    top: -120rpx;
    left: 36rpx;
    background: #fff;
    border: 8rpx solid #acffef;
    border-radius: 30rpx;
  }
  .codeFooter {
    width: 100%;
    height: 180rpx;
    background-image: url('@/static/image/img/shaCodeBottom.png');
    background-size: cover;
    bottom: 0rpx;
    left: 0rpx;
  }
}
</style>
